<template>
	<view class="container">
		<view class="set_deposite">
			<view class="set_tab">
				<view class="tab" :class="{active:isActive}">
					<text  @click="checkIndex(0)">购买ADC</text>
					<text  @click="checkIndex(1)">出售ADC</text>
				</view>
				<view class="case_choose" @click="open_case_box()">
					<image src="/static/images/g_img32.png"></image>
					<text>筛选</text>
				</view>
			</view>
			
			<!--购买ADC start-->
			<view v-show="navIndex==0">
				<pBuy></pBuy>
			</view>
			<!--购买ADC end-->
			
			<!--出售ADC start-->
			<view v-show="navIndex==1">
				<pSell></pSell>
			</view>
			<!--出售ADC end-->
		</view>
		
		<!--弹窗start-->
		<u-popup :show="case_box" mode="bottom" :closeOnClickOverlay="true" @close="popup_case_box" customStyle="background: none">
		    <view class="case_box">
				<view class="tit">交易条件筛选<image src="/static/images/img_31.png" @tap="popup_case_box()"></image></view>
				<view class="list">
					<text class="tits">会员信誉值 : </text>
					<view class="credit_num">
						 <view @click="case_chagne(index)" :class="credit_show==index?'on':''" v-for="(item,index) in credit_items" :key="index">{{item.num}}</view>
					</view>
					<text class="tits">ADC交易数量 : </text>
					<view class="remind_tips">P2P交易数量为50的倍数，其它数量可使用“互转”功能来进行。如供需列表里搜索不到合适的数量时，可通过多次下单或“创建交易”来完成。</view>
					<view class="num_list">
						<view @click="num_chagne(index)" :class="num_show==index?'on':''" v-for="(item,index) in num_items" :key="index">{{item.num}}</view>
					</view>
				</view>
				<view class="btn">
					<view>
						<button class="submit" @tap="popup_case_box">重置</button>
						<button class="submit on" @tap="popup_case_box">确认</button>
					</view>
				</view>
		    </view>
		 </u-popup>
		<!--弹窗end-->
	</view>
</template>

<script>
import pBuy from './p2p_buy.vue'
import pSell from './p2p_sell.vue'
export default{
	components:{
		pBuy,pSell
	},
	data(){
		return{
			navIndex: 0,
			isActive: false,
			case_box: false,
			border: false,
			credit_show: 1,
			num_show: 1,
			credit_items:[{num:'不限'},{num:'60分及以上'},{num:'100分'}],//会员信誉值
			num_items:[{num:'全部'},{num:'50~300个'},{num:'350个~600g'},{num:'650个~1000个'}],//交易数量
		}
	},
	methods:{
		checkIndex(index) {
			console.log(index)
			this.navIndex = index;
			if(this.navIndex == 1){
				this.isActive = true
			}else{
				this.isActive = false
			}
		},
		open_case_box(){
			this.case_box=true
		},
		popup_case_box(){
			this.case_box = false
		},
		case_chagne(i){
		    this.credit_show=i
		},
		num_chagne(i){
		    this.num_show=i
		},
	}
}
</script>

<style lang="scss">
@import url("../../common/style.scss");
@import url("create.scss");

.set_deposite .tab{
	border-radius: 20rpx;
	background: url("/static/images/g_img30.png") no-repeat 0 0;
	background-size: auto 100%;
}
.set_deposite .tab.active{
	background-image: url("/static/images/g_img33.png");
}
</style>